<template lang="html">
    <div class="bannerAdd">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-message"></i>&nbsp;新增轮播图</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container"> 
             <el-form ref="form" label-width="160px">
                 <el-form-item label="位置：">
                    <el-input v-model="location" placeholder="请输入轮播所属位置" style="width:600px"></el-input>
                    <div style="color:red;padding-left:10px;">PC端首页请输入：1，APP端首页请输入：2</div>
                </el-form-item>
                <el-form-item label="轮播图：">
                    <div class="sola-upload clearfix">
                        <div class="sola-left clearfix" v-show="imgUrl!=''">
                            <div  class="sola-flex" >
                                <img  :src="imgUrl" />
                                <span class="delete" @click="delPicture()"><i class="el-alert__icon el-icon-error"></i></span>
                            </div>
                        </div>
                        <div class="sola-file-box">
                            <el-button type="primary" plain>上传图片<i class="el-icon-upload el-icon--right"></i></el-button>
                            <input class="btn-file" type="file" @change="uploadBanner" v-loading.fullscreen.lock="fullscreenLoading"/>
                            <div style="color:red;padding-left:10px;">PC建议上传的轮播图比例是3：1 ，示例：1920X640 </div>
                            <div style="color:red;padding-left:10px;">APP建议上传的轮播图比例是3：1 ，示例：300X100 </div>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onAddGoods()">确认添加</el-button>
                    <router-link to="/banner"><el-button type="primary">返回列表</el-button></router-link>
                </el-form-item>
            </el-form>
        </div>
        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {postUploadBase64} from '@/api/public'
import {postBannerAdd} from '@/api/banner/list'

export default {
    name: "banneradd",
    data() {
        return {
            location:'',//位置：1PC首页、2APP首页
            imgUrl:'',//轮播图地址
            fullscreenLoading:false,//等待上传
            accept: 'image/gif, image/jpeg, image/png, image/jpg', //图片上传类型
            delVisible:false,//删除图片
        }
    },
    created(){
        
    },
    mounted() {
        
    },
    methods: {
        //删除弹框
        deleteRow(){
            this.imgUrl="";//清空图片地址
            this.$message.success('删除成功');
            this.delVisible = false;
        },
        //确认新增
        onAddGoods(){
            if(this.location == ''){
                this.$message({
                    message: '请输入轮播图所属位置',
                    type: 'warning'
                });
                return false;
            }
            if(this.imgUrl == ''){
                this.$message({
                    message: '请上传轮播图',
                    type: 'warning'
                });
                return false;
            }
            //添加轮播图
            postBannerAdd(this.location,this.imgUrl).then(res => {
                if(res.code == 200){
                    this.$message({
                        message: '添加成功！',
                        type: 'success'
                    });
                }else {
                    this.$message.error('添加失败！');
                }
            })
        },
        //转base64 file
        uploadBanner(event){
            var _event = event;
            var _this = this;
            let reader =new FileReader();  
            let img1=event.target.files[0];  
            let type=img1.type;//文件的类型，判断是否是图片  
            let size=img1.size;//文件的大小，判断图片的大小
            const files = event.target;  
            if(this.accept.indexOf(type) == -1){  
                this.$message({
                    message: '请选择gif,jpeg,png,jpg格式图片上传',
                    type: 'warning'
                });
                return false;  
            }  
            else if(size>3145728){  
                this.$message({
                    message: '请选择3M以内的图片上传',
                    type: 'warning'
                }); 
                return false;  
            }else if (typeof(FileReader) === 'undefined') {
                this.$notify.error({
                    title: '错误',
                    message: '抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！'
                });

            }else {
                this.fullscreenLoading = true;
                let reader = new FileReader();
                reader.readAsDataURL(img1);
                reader.onload = function(e) {
                    var base = this.result;
                    // console.log(base);
                    //上传图片
                    postUploadBase64(base).then(response=>{
                        console.log(response);
                        if(response.code==200){
                            _this.$message({
                                message: '恭喜你，图片上传成功',
                                type: 'success'
                            });
                            _this.imgUrl=response.data;
                            
                        }else{
                            _this.fullscreenLoading = false;
                            _this.$notify.error({
                                title: '上传图片失败',
                                duration:2000,
                                message: '失败原因：'+response.msg
                            });
                        }
                        _this.fullscreenLoading = false;
                    })

                }
                
            }
        },
        //删除图片
        delPicture(){
            //当前记录的下标
            this.delVisible = true;
        },
    }
}
</script>

<style lang="stylus" scoped>
.sola-upload{
    .sola-left{
        width :100%;
        height :auto;
        .sola-flex{
            float:left;
            margin-right:15px;
            position:relative;
            .delete{
                position:absolute;
                top:2px;
                right:13px;
                color: #f56c6c;
                display:inline-block;
                padding:5px 5px;
                .el-alert__icon{font-size:28px;cursor:pointer}
            }
            img {
                width:300px;
                height:100px;
            }
        }
    }
    .sola-file-box{
        position:relative;
        .btn-file{
            position:absolute;
            top:0;
            left:0;
            z-index:1;
            opacity:0;
            width :120px;
            height :40px;
            outline: 0;
            background-color :none;
            cursor:pointer;
        }
    }

}
</style>
